<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>掌声四起</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-migrate-1.1.0.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="js/share.js"></script>
    <script>
        getWeixinShareData('/signature')
    </script>
    <style>
        .main, .page0, .page1, .page2 {
            position: relative;
            width: 100%;
            height: 100%;
            overflow-y: auto;
        }

        .main {
            overflow: hidden;
        }

        .tip {
            position: absolute;
            top: 3%;
            width: 47%;
            left: 26.5%;
            z-index: 6;
            -webkit-animation:scaleDraw 5s infinite ;
        }

        .db {
            position: absolute;
            bottom: 3%;
            width: 71%;
            left: 14.5%;
            z-index: 10;
        }

        .change {
            width: 30%;
            position: absolute;
            top: 68%;
            left: 35%;
            z-index: 8;
        }

         #mycanvas {
            position: absolute;
        }

        .saveimg, .tip, .db, .change, #mycanvas {
            display: none;
        }
        .page0{
            background: url(imgs/page0/1background.png) no-repeat center center;
            background-size: cover;
            -webkit-animation: imgAnimation 1s;
        }

        .page0_tl{
            position: absolute;
            top: 32%;
            width: 88%;
            height: 40%;
            right:-80%;
            -webkit-animation:scaleDraw 5s infinite ;
            background:url(imgs/page0/1title.png) no-repeat;
            background-size:100%;
        }
        .page0_button{
            position: absolute;
            bottom: -10%;
            width: 49%;
            height: 10%;
            right:24%;
            -webkit-animation:scaleDraw 5s infinite ;
            background:url(imgs/page0/1btn.png) no-repeat;
            background-size:100%;
        }

        .page1 {
            background: url(imgs/2background.png) no-repeat center center;
            background-size: cover;
            display: none;
            -webkit-animation: imgAnimation 1s;
        }

        /*.page1 .tl {*/
            /*position: absolute;*/
            /*top: 23%;*/
            /*width: 83%;*/
            /*height: 40%;*/
            /*right:-100%;*/
            /*-webkit-animation:scaleDraw 5s infinite ;*/
            /*background:url(imgs/wenzi.png) no-repeat;*/
            /*background-size:100%;*/
            /*!*left: 3.5%;*!*/
        /*}*/

        .page1 .ipt_txt {
            position: absolute;
            width: 60%;
            height: auto;
            top: 62%;
            left: 21.5%;
            font-size: 0.9em;
        }

        .page1 .ipt_txt .name_txt {
            width: 100%;
            height: 47px;
            line-height: 47px;
            background: #f3f3f3;
            text-align: center;
            color: #898989;
            border-radius: 5px;
        }

        .page1 .ipt_txt .error {
            width: 100%;
            text-align: center;
            color: #c80a28;
            padding: 5px 0;
            display: inline-block;
            display: none;
        }

        /*.page1 .gene_btn {*/
            /*width: 24%;*/
            /*height: 7.4%;*/
            /*font-size: 23px;*/
            /*font-weight: bold;*/
            /*background-color: #AF0F2E;*/
            /*position: absolute;*/
            /*color: white;*/
            /*border-radius: 5px;*/
            /*top: 62%;*/
            /*left: 68%;*/
            /*background-size: cover;*/
        /*}*/

        .page1 .gene_btn {
            width: 40%;
            /* height: 8.4%; */
            position: absolute;
            color: white;
            border-radius: 10px;
            -webkit-animation: scaleDraw 2.5s infinite;
            bottom: -20%;
            left: 32%;
            background-size: cover;
        }

        .page1 .sex {
            width: 4%;
            height: 5.3%;
            font-size: 17px;
            font-weight: bold;
            position: absolute;
            color: white;
            border-radius: 5px;
            top: 73%;
        }

        .page1 .sex.lady{
            background-color: #AF0F2E;
            left: 28%;
        }

        .page1 .sex.gentle{
            left: 57%;
            background-color: #3F3751;
        }

        .name.woman{
            position: absolute;
            bottom: 22%;
            left: 35%;
            color: white;
            font-size: 23px;
        }
        .name.man{
            position: absolute;
            bottom: 22%;
            left: 64%;
            color: white;
            font-size: 23px;
        }

        /*.page1 .sex {*/
            /*width: 17%;*/
            /*height: 5.3%;*/
            /*font-size: 17px;*/
            /*font-weight: bold;*/
            /*position: absolute;*/
            /*color: white;*/
            /*border-radius: 5px;*/
            /*top: 73%;*/
        /*}*/

        /*.page1 .sex.lady{*/
            /*background-color: #AF0F2E;*/
            /*left: 30%;*/
        /*}*/

        /*.page1 .sex.gentle{*/
            /*left: 59%;*/
            /*background-color: #3F3751;*/
        /*}*/



        /*.page1 .gene_btn:active {*/
            /*background: url('imgs/an2.png') no-repeat center center;*/
            /*width: 30%;*/
            /*height: 6%;*/
            /*top: 64%;*/
            /*left: 35%;*/
            /*background-size: cover;*/
        /*}*/

        .page2 {
            /*background: url(imgs/bj.png) no-repeat center center;*/
            /*background-size: cover;*/
        }

        /*.man{*/
            /*background: url(imgs/xiansheng.jpg) no-repeat center center;*/
            /*background-size: cover;*/
        /*}*/
        /*.woman{*/
            /*background: url(imgs/nvshi.jpg) no-repeat center center;*/
            /*background-size: cover;*/
        /*}*/

        .page2 img {
            float: left;
        }

        .page2 .part2 {
            width: 100%;
            float: left;
            position: relative;
        }

        .page2 .part2 .page2_txt {
            text-indent: 35px;
            width: 76%;
            position: absolute;
            left: 12%;
            top: 2%;
            font-size: 0.95em;
            line-height: 28px;
            color: #000;
            font-family: 'Microsoft YaHei', 'helvetica neue', tahoma, 'hiragino sans gb', stheiti, 'wenquanyi micro hei', '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', sans-serif;
        }

        .page2 .page2_txt .topic {
            width: 45%;
            position: absolute;
            left: 28%;
            margin-top: 84%;
        }

        .page2 .page2_txt .mom {
            margin-top: 107%;
            position: absolute;
            left: 4%;
        }

        .page2 .replace {
            width: 30%;
            position: absolute;
            top: 70%;
            left: 35%;
        }

        .select{
            font-size: 17px;
        }


        /*特效代码*/
        @-webkit-keyframes scaleDraw {
            0% {
                -webkit-transform:scale(1);
            }
            25% {
                -webkit-transform:scale(1.1);
            }
            50% {
                -webkit-transform:scale(1);
            }
            75% {
                -webkit-transform:scale(1.1);
            }
        }

        @-webkit-keyframes imgAnimation{
            0%{ opacity: 0}
            50%{ opacity: 0.3}
            100%{ opacity: 0.7}
        }
        /*特效代码 end*/

        .page1 .radio {
            position: relative;
            display: inline-block;
            font-weight: 400;
            color: white;
            top: 73%;
            left: 31%;
            margin-right: 32px;
            padding-left: 25px;
            cursor: pointer;
        }

        .page1 .radio input {
            position: absolute;
            left: -9999px;
        }

        .page1 .radio i {
            display: block;
            position: absolute;
            top: 6px;
            left: 0;
            width: 15px;
            height: 15px;
            outline: 0;
            border: 1px solid #ff23e2;
            background: #ffffff;
            border-radius: 50%;
            transition: border-color .3s;
            -webkit-transition: border-color .3s;
        }

        .page1 .radio input + i:after {
            position: absolute;
            content: '';
            top: 3px;
            left: 3px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background-color: #ff5d5b;
            opacity: 0;
            transition: opacity .1s;
            -webkit-transition: opacity .1s;
        }

        .page1 .radio input:checked + i:after {
            opacity: 1;
        }

    </style>
</head>
<body>
<div class="main">
    <img src="imgs/tip.png" class="tip"/>
    <!-- <span class="change" id="chan"></span> -->
    <div class="page0">
        <div class="page0_tl"></div>
        <div class="page0_button"></div>
    </div>
    <div class="page1">
        <!--<img src="imgs/wenzi.png" class="tl"/>-->
        <!--<div class="tl"></div>-->
        <div class="ipt_txt">
            <input type="text" class="name_txt" placeholder="请输入姓名２－3个中文" maxlength="3"/>
            <div class="error">请输入姓名２－3个中文</div>
        </div>

        <img class="gene_btn" src="imgs/2btn.png" onclick="MtaH5.clickStat('Button_Click')">

        <label class="radio">女士<input type="radio" name="sex" value="0"  class="sex lady"  checked="checked" ><i></i></label>
        <label class="radio">先生<input type="radio" name="sex" value="1"   class="sex gentle"><i></i></label>
        <!--<input type="radio" name="sex" value="0"  class="sex lady"  checked="checked" ><i></i><span class="name woman">女士</span>-->
        <!--<input type="radio" name="sex" value="1"   class="sex gentle"><i></i><span class="name man">先生</span>-->
    </div>
    <div class="page2">

    </div>
    <canvas id="mycanvas"></canvas>
    <img class="result"/>
</div>
<script src="js/generatepic.js"></script>
<script>
    /*文字右侧飞入*/
    $('.page0_tl').animate({right: '6%'}, 2500);
    $('.page0_button').animate({bottom: '10%'}, 2500);
    $('.gene_btn').animate({bottom: '11%'}, 2500);

    $('.page0_button').click(function () {
       $(".page0").hide();
       $(".page1").show();
    });

    var Relt_Url;
    var brower = {
        versions: function () {
            var ua = navigator.userAgent;
            return {
                iphone: ua.indexOf('iPhone') > -1,
                ios: !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                android: ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1
            }
        }()
    };

    var currentCoupon = Math.floor(Math.random() * 10);
    var inputName = undefined;
    var randomSeeds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

    function getRandomSeed(exclusive) {
        var seed = exclusive;
        while (exclusive == seed) {
            seed = Math.floor(Math.random() * 10)
        }
        return seed
    }

    $(function () {
        var maxW = $(".page2_txt").width;
        console.log(maxW);
        var h = $(window).height() || document.documentElement.clientHeight;
        var w = $(window).width() || document.documentElement.clientWidth;

        $(".main").css("height", h + "px");
        $(".main").css("width", w + "px");




        /*点击生成按钮*/
        $(".gene_btn").click(function () {
            inputName = $.trim($(".name_txt").val());
            if (inputName.length < 2) {
                $(".error").show();
                return;
            }
            $(".error").hide();
            var showCoupon = $("#" + currentCoupon.toString());
            showCoupon.show();
            showCoupon.find(".name").html(inputName);
            $(".page1").hide();
            var url_img;
            var val=$('input:radio[name="sex"]:checked').val();
            console.log(val);
            if( val == "0"){
                $(".page2").addClass("woman");
                url_img =  '/imgs/nvshi.png';
            }else if( val == "1" ){
                $(".page2").addClass("man");
                url_img =  '/imgs/xiansheng.png';
            }
            drawImage(inputName,url_img);
        });
    });

    function drawImage(name,url_img) {
        var co = document.getElementById('mycanvas');
        var ctx = co.getContext("2d");
        var img = new Image();
        img.src = url_img;

        img.onload = function () {
            var w = img.width;
            var h = img.height;
            co.width = w;
            co.height = h;
            ctx.drawImage(img, 0, 0, w, h, 0, 0, w, h);

            ctx.fillStyle = "#2064c4";

            switch (name.length) {
                case 2 :
                    ctx.font = "30px STKkaiti";
                    ctx.fillText(name, 210, 550);
                    break;
                case 3 :
                    ctx.font = "25px STKkaiti";
                    ctx.fillText(name, 200, 550);
                    break;
                case 4 :
                    ctx.font = "20px STKkaiti";
                    ctx.fillText(name, 200, 550);
                    break;
            }


            Relt_Url = co.toDataURL('image/jpeg');
            console.log(Relt_Url);
            if (brower.versions.android) {
                gerneratePicture(Relt_Url.substr(22), function(data){
                    $(".result").attr("src", data.url);
                    $(".page2").hide();
                    $(".tip").show();
                    $(".db").show();
                    $(".change").show();
                })
            } else {
                $(".result").attr("src", Relt_Url);
                $(".page2").hide();
                $(".tip").show();
                $(".db").show();
                $(".change").show();
            }

        }
    }

//    //平台、设备和操作系统
//    var system ={
//        win : false,
//        mac : false,
//        xll : false
//    };
//    //检测平台
//    var p = navigator.platform;
//    system.win = p.indexOf("Win") == 0;
//    system.mac = p.indexOf("Mac") == 0;
//    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
//    //跳转语句
//    if(system.win||system.mac||system.xll){//转向后台登陆页面
//        window.location.href="pc.html";
//    }else{
//        console.log("移动端");
//    }
</script>
<script type="text/javascript" src="http://pingjs.qq.com/h5/stats.js" name="MTAH5" sid="500340139" ></script>
<script>
    var _mtac = {"senseQuery":1};
    (function() {
        var mta = document.createElement("script");
        mta.src = "http://pingjs.qq.com/h5/stats.js?v2.0.4";
        mta.setAttribute("name", "MTAH5");
        mta.setAttribute("sid", "500563254");
        mta.setAttribute("cid", "500563258");
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(mta, s);
    })();
</script>
</body>
</html>